<template>
    <div id="answer">
        <el-card >
            <img src="/static/logo.png" alt="">
            <span>问卷系统</span>
        </el-card>
        <!-- 数据展示 -->
        <el-card v-for="(content,index) in papers.content" :key="'content_'+content.id">
            <div slot="header">
                <span>{{index+1}}、{{content.outline_name}}</span>
            </div>
            <el-radio-group v-model="papers.content[index].answer">
                <el-radio v-for="item in papers.item" :key="'item_'+item.id" :label="item">{{item.item_name}}</el-radio>
            </el-radio-group>
        </el-card>
        <!-- 建议字段 -->
        <el-card >
            <div slot="header">
                <span>建议</span>
            </div>
            <el-input v-model="note" type="textarea"></el-input>
        </el-card>
        <!-- 保存按钮 -->
        <div>
            <el-button type="primary" @click="save">保存</el-button>
        </div>
       
        
    </div>
</template>
<script>
export default {
    props:['id'],
    data(){
        return{
            papers:[],
            note:'',
        }
    },
    created(){
        this.getPapers();
    },
    methods:{
        save(){
            this.axios.post('/answers/add',{
                paper_id:this.id,
                content:JSON.stringify(this.papers.content),
                item:JSON.stringify(this.papers.item),
                note:this.note
            }).then(()=>{
                this.$message.success('感谢本次作答！')
            }).catch(()=>{
                 this.$message.error('请勿重复作答！')
            })
        },
        getPapers(){
            this.axios.get(`/papers/one/${this.id}`).then((ret)=>{
                this.papers=ret.data;
                console.log(ret.data)
            })
        }
    }
}
</script>
<style>
#answer .el-card{
    margin-bottom:10px;
}
</style>


